<template>
  <div class="login-container">
    <div class="header">
      <h1 class="title">智慧医院便民平台</h1>
      <p class="subtitle">开启智慧医疗新时代</p>
    </div>

    <div class="login-form">
      <h2>用户登录</h2>

      <!-- 账户输入 -->
      <div class="input-group">
        <label>账户</label>
        <input type="text" v-model="username" placeholder="请输入账户" class="input-field" />
      </div>

      <!-- 密码输入 -->
      <div class="input-group">
        <label>密码</label>
        <input type="password" v-model="password" placeholder="请输入密码" class="input-field" />
      </div>

      <!-- 登录按钮 -->
      <button @click="handleLogin" class="login-btn">
        登录
      </button>

      <!-- 微信登录 -->
      <button @click="handleWechatLogin" class="wechat-btn">
        微信一键登录注册
      </button>

      <!-- 协议同意 -->
      <div class="agreement">
        <label class="checkbox-label">
          <input type="checkbox" v-model="agreed" />
          <span>我已阅读并同意</span>
        </label>
        <div class="agreement-links">
          <a href="#" @click="showPrivacyPolicy">隐私政策</a>
          <span>和</span>
          <a href="#" @click="showUserAgreement">用户协议</a>
          <span>和</span>
          <a href="#" @click="showPlatformAgreement">平台协议</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import OutpatientApi from '@/utils/Interceptors'
import { useUserStore } from '@/stores/user'
import { showToast } from 'vant'

// 响应式数据
const router = useRouter()
const userStore = useUserStore()
const username = ref('')
const password = ref('')
const agreed = ref(true)

// 登录处理
const handleLogin = async () => {
  if (!agreed.value) {
    showToast({
      message: '请先同意用户协议',
      position: 'middle',
      duration: 2000,
      forbidClick: true
    })
    return
  }

  if (!username.value) {
    showToast({
      message: '请输入账户',
      position: 'middle',
      duration: 2000,
      forbidClick: true
    })
    return
  }

  if (!password.value) {
    showToast({
      message: '请输入密码',
      position: 'middle',
      duration: 2000,
      forbidClick: true
    })
    return
  }

  try {
    const loginData = {
      Username: username.value,
      Password: password.value
    }

    const response = await OutpatientApi.post('/api/User/Login', loginData)

    if (response.data.code === 200) {
      // 使用用户状态管理保存用户信息
      userStore.setUserInfo(response.data.data)

      showToast({
        message: '登录成功',
        position: 'middle',
        duration: 1500,
        forbidClick: true
      })

      // 跳转到首页
      setTimeout(() => {
        router.push('/')
      }, 1500)
    } else {
      showToast({
        message: response.data.msg || '登录失败',
        position: 'middle',
        duration: 2000,
        forbidClick: true
      })
    }
  } catch (error: any) {
    console.error('登录错误:', error)
    showToast({
      message: error.response?.data?.msg || '登录失败，请重试',
      position: 'middle',
      duration: 2000,
      forbidClick: true
    })
  }
}

// 微信登录
const handleWechatLogin = () => {
  showToast({
    message: '微信登录功能开发中',
    position: 'middle',
    duration: 2000,
    forbidClick: true
  })
}

// 协议相关
const showPrivacyPolicy = () => {
  showToast({
    message: '隐私政策',
    position: 'middle',
    duration: 2000,
    forbidClick: true
  })
}

const showUserAgreement = () => {
  showToast({
    message: '用户协议',
    position: 'middle',
    duration: 2000,
    forbidClick: true
  })
}

const showPlatformAgreement = () => {
  showToast({
    message: '平台协议',
    position: 'middle',
    duration: 2000,
    forbidClick: true
  })
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
}

.header {
  text-align: center;
  padding: 40px 20px 30px;
  color: white;
}

.title {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}

.login-form {
  background: white;
  margin: 0 20px;
  border-radius: 12px;
  padding: 30px 20px;
  flex: 1;
}

.login-form h2 {
  text-align: center;
  margin: 0 0 30px 0;
  color: #333;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
}

.input-field {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
}

.login-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 15px;
}

.wechat-btn {
  width: 100%;
  padding: 15px;
  background: white;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}

.agreement {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
}

.agreement-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.agreement-links a {
  color: #1989fa;
  text-decoration: none;
}

.agreement-links span {
  color: #666;
}

/* 自定义Toast样式 */
:deep(.van-toast) {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
}

:deep(.van-toast--middle) {
  top: 50%;
  transform: translateY(-50%);
}
</style>